                                   <!-- 领取页面新ui领取 -->

<!-- 传入的属性 -->
<!-- newGetImg:背景图片
     nweGetIcon:左边单位
     newGetNumber:具体数量
     newGetTitle:标题
     newGetTitleNumber:卡卷张数
     newGetPositive:副标题
     equityUrl: 领取跳转登录地址
     onlyLogo:获取唯一的识别值
	 newGetIndex:获取位置
     ifShowIcon:左边单位展示的位置   左边false  右边true  默认右边
     ifNewGetBtn:判断领取按键功能变化   领取false  已领取true  默认领取false
     PorN:用于判断是否是会员  是true  不是fals  默认false (选用)-->
<!-- 传入函数 -->
<!-- newGetToBtn：使用父组件函数  传入参数  标题newGetTitle  领取地址：equityUrl  唯一识别码onlyLogo 具体数量newGetNumber 位置信息newGetIndex-->

<template>
	<div class="newGetShow" :style="{backgroundImage:'url('+ newGetImg +')'}">
		<!-- 左边数据 -->
		<!-- ======================================================================== -->
		<div class="newGetShow-left">
			<!-- 左边单位 -->
			<span v-show="!ifShowIcon">{{nweGetIcon}}</span>
			<!-- 具体数量 -->
			{{newGetNumber}}
			<!-- 右边单位 -->
			<span v-show="ifShowIcon">{{nweGetIcon}}</span>
		</div>

		<!-- 中间内容 -->
		<!-- ======================================================================== -->
		<div class="newGetShow-center" :class="newGetNumber>=100?'newGetShow-center-wi':''">
			<!-- 标题 -->
			<div class="newGetShow-center-title">
				{{newGetTitle}}
				<!-- 卡卷张数如果存在才展示，否则不展示 -->
				<span v-show="newGetTitleNumber" class="newGetShow-center-icon">x</span>
				<!-- 卡卷张数 -->
				<span v-show="newGetTitleNumber">{{newGetTitleNumber}}</span>
			</div>

			<!-- 副标题 -->
			<div class="newGetShow-center-positive">
				{{newGetPositive}}
			</div>
		</div>

		<!-- 领取按键 -->
		<!-- ======================================================================== -->
		<div class="newGetShow-btn" v-if="!ifNewGetBtn" @click="newGetBtn">领取</div>
		<div class="newGetShow-btn" v-if="ifNewGetBtn">已领取</div>
	</div>
</template>

<script>
	export default {
		props: {
			// 数据传输
			// ---------------------------------------------------
			// 背景图片
			newGetImg: {
				type: [String],
				default: 'https://oss4.komect.com/equity-qh/icon/lingqu/Plus_crd_bg.png'
			},
			// 左边单位
			nweGetIcon: {
				type: [String, Number],
				default: ''
			},
			// 具体数量
			newGetNumber: {
				type: [String, Number],
				default: ''
			},
			// 标题
			newGetTitle: {
				type: [String],
				default: ''
			},
			// 卡卷张数
			newGetTitleNumber: {
				type: [String, Number],
				default: ''
			},
			// 副标题
			newGetPositive: {
				type: [String],
				default: ''
			},
			// 领取跳转登录地址
			equityUrl: {
				type: [String],
				default: ''
			},
			// 获取唯一的识别值
			onlyLogo: {
				type: [String, Number],
				default: ''
			},
			// 获取位置
			newGetIndex: {
				type: [String, Number],
				default: ''
			},

			// 功能传输
			// ---------------------------------------------------
			// 左边单位展示的位置   左边false  右边true  默认右边
			ifShowIcon: {
				type: [Boolean],
				default: true
			},
			// 判断领取按键功能变化   领取false  已领取true  默认领取false
			ifNewGetBtn: {
				type: [Boolean],
				default: false
			},
			// 用于判断是否是plus会员  是true  不是fals  默认false
			PorN: {
				type: [Boolean],
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {
			// 领取按键点击函数
			newGetBtn() {
				// 使用父组件函数  传入参数  标题newGetTitle  领取地址：equityUrl  唯一识别码onlyLogo  具体数量newGetNumber  获取位置newGetIndex
				this.$emit('newGetToBtn', {
					newGetTitle: this.newGetTitle,
					equityUrl: this.equityUrl,
					onlyLogo: this.onlyLogo,
					newGetNumber:this.newGetNumber,
					newGetIndex:this.newGetIndex
				})
			}
		}
	}
</script>

<style>
	/* 领取页面新ui领取 */
	.newGetShow {
		width: 345px;
		height: 78px;
		display: flex;
		align-items: center;
		box-shadow: 0px 2px 0px 0px #fbf2e2 inset;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
		margin-bottom: 10px;
	}

	/* 左边单位 */
	/* -------------------------------------------------------------------- */
	.newGetShow-left {
		height: 56px;
		font-size: 40px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		span-align: left;
		color: #402e25;
		line-height: 56px;
		letter-spacing: -1px;
		position: relative;
		margin-left: 20px;
	}

	.newGetShow-left span {
		font-size: 18px;
		margin-left: 3px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 600;
		span-align: left;
		color: #402e25;
	}

	/* 中间内容 */
	/* -------------------------------------------------------------------- */
	.newGetShow-center {
		width: 140px;
		font-size: 18px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 600;
		span-align: left;
		color: #402e25;
		line-height: 25px;
		margin-left: 10px;
	}

	.newGetShow-center-wi {
		width: 95px;
	}

	/* 单位 */
	.newGetShow-center-icon {
		font-size: 15px;
		margin-left: 3px;
	}

	/* 副标题 */
	.newGetShow-center-positive {
		font-size: 12px;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 500;
		span-align: left;
		color: #725345;
		line-height: 17px;
	}

	/* 领取按键 */
	/* -------------------------------------------------------------------- */
	.newGetShow-btn {
		width: 70px;
		height: 25px;
		background: linear-gradient(180deg, #584e43, #2a2a2e);
		border-radius: 15px;
		box-shadow: 0px 0px 3px 0px rgba(37, 32, 30, 0.70) inset;
		font-size: 12px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		span-align: center;
		color: #f0dab3;
		line-height: 25px;
		position: absolute;
		right: 30px;
	}
</style>
